<template>
	<div class="header">
		<!-- 左侧返回按钮 -->
		<!-- isLeft为true时显示 -->
		<div class="header-button is-left" v-show="isLeft">
			<i class="fa fa-chevron-left"></i>
			<!-- 返回上一页操作:$router.go(-1) -->
			<button @click="$router.go(-1)">返回</button>
		</div>
		<!-- 中间标题 -->
		<h1 class="header-title">{{title}}</h1>
	</div>
</template>

<script>
export default {
	name: "Header",
	props: {
		title: String,
		isLeft: {
			type: Boolean,
			default: false
		}
	}
}
</script>

<style scoped>
.header {
	/* 水平垂直居中， */
	align-items:center;
	text-align: center;
	background-color: #009eef;
	box-sizing: border-box;
	color: #fff;
	display: flex;
	font-size: 16px;
	height: 45px;
	line-height: 1;
	padding: 0 10px;
	white-space: nowrap;
 	position: fixed;
  width: 100%;
  top: 0;
  z-index: 99;
}

.header-button button {
	/* 背景透明+无边框+无阴影+颜色字体大小继承+无内边距+块级内联+点击无高亮 */
	background-color: transparent;
	border: none;
	box-shadow: none;
	color: inherit;
	display: inline-block;
	padding: 0;
	font-size: inherit;
	outline: none;
}

.header-title {
	/* flex-grow：1，占据剩余位置 */
	flex: 1;
}
</style>

